<template>
  <div class="main_welcome">

    <el-breadcrumb separator-class="el-icon-arrow-right">

      &nbsp;&nbsp;&nbsp;&nbsp;<button @click="enjoy" class="btn btn-success">共享文件</button>
    </el-breadcrumb>

    <uploader :options="options" class="uploader-example">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>Drop files here to upload or</p>
        <uploader-btn>select files</uploader-btn>
        <uploader-btn :attrs="attrs">select images</uploader-btn>
        <uploader-btn :directory="true">select folder</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>

    </uploader>
    <el-upload style="margin-left:14%;margin-top:5%"
               class="avatar-uploader el-upload--text"
               :drag="{Plus}"
                :action="importUrl"
                multiple
               :show-file-list="false"
               :data="{SavePath: this.Path.url}"
               :on-success="handleVideoSuccess"
               :before-upload="beforeUploadVideo"
               :on-progress="uploadVideoProcess">
      <i v-if="Plus" class="el-icon-upload"></i>
      <div v-if="Plus" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
      <div class="el-upload__tip" slot="tip">只能上传mp4/flv/avi文件，且不超过300M</div>
    </el-upload>



    <table class="table table-bordered table-hover">
      <thead>

      </thead>
      <tbody id="zuoye">

      </tbody>
    </table>


    <hr>

    <table class="table table-bordered table-hover">
      <thead>

      </thead>
      <tbody id="pic">



      </tbody>

    </table>





  </div>
</template>




<script>
import axios from "axios";
import $ from 'jquery';
import router from "@/router";
import Cookie from 'js-cookie';

export default {

  data() {
    var user=sessionStorage.getItem('username');
    var fname=sessionStorage.getItem('fname');

    console.log(name);
    console.log(fname);
    return {
      importUrl:'http://localhost:9074/api/uploadVidoe3?user='+user,
      options: {
        // 可通过 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
        target: 'http://localhost:9074/upload?user='+user,

        testChunks: false
      },
      attrs: {
        accept: 'image/*'
      },

      videoForm: {
        videoId: '',
        videoUrl: ''
      },
      videoFlag: false,
      Plus: true,
     Path: {
        url: 'C:/video/videoUpload'
      },
      videoUploadPercent: 0,
    }



  },
  mounted: function () {
  },

   methods:{
     beforeUploadVideo (file) {
       console.log(file);
       const isLt300M = file.size / 1024 / 1024 < 300
       if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
         this.$message.error('请上传正确的视频格式')
         return false
       }
       if (!isLt300M) {
         this.$message.error('上传视频大小不能超过300MB哦!')
         return false
       }
     },
     // 视频上传过程中执行
     uploadVideoProcess (event, file, fileList) {
       this.Plus = false
       this.videoFlag = true
       this.videoUploadPercent = file.percentage.toFixed(0)
     },
     // 视频上传成功是执行
     handleVideoSuccess (res, file) {
       this.Plus = false
       this.videoUploadPercent = 100
       console.log(res)
       // 如果为200代表视频保存成功
       if (res.resCode === '200') {
         // 接收视频传回来的名称和保存地址
         // 至于怎么使用看你啦~
         this.videoForm.videoId = res.newVidoeName
         this.videoForm.videoUrl = res.VideoUrl
         this.$message.success('视频上传成功！')
       } else {
         this.$message.success('视频上传成功！')
       }
     },


     enjoy(){
       this.$router.push('/user');
     }
   }






}
</script>
<style lang="less" scoped>
.a{
  text-decoration: none;
}
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}


</style>
